import React, { Component } from 'react';
import {
	StyleSheet, Text, View, TouchableOpacity
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import MethodUtil from '../../../../utils/MethodUtil';
const scale = GLOBAL.SCALE;

export const CreditHistoryItem = (props) => {
	const { data, didPressState, replyPress, ifEdit } = props;
	const { creditApplyStatus, creditApplyStatusName, creditApplyAmount, createByName, createTime, processInstanceId, creditApplyId, organName } = data;
	return (
		<View style={styles.orderCell}>
			<View style={styles.order}>
				<View style={styles.orderHead}>
					<View style={styles.orderHeadLeft}>
						<Text style={styles.orderHeadText}>{createTime || '-'}</Text>
					</View>
					<Text style={styles.statusText}>{creditApplyStatusName}</Text>
				</View>
				<Text style={styles.statusListBtn} onPress={() => { didPressState(creditApplyId, processInstanceId) }}>查看审批流</Text>
				<View style={styles.orderMain}>
					<View style={styles.orderCol}>
						<Text style={styles.orderText}>本次申请额度</Text>
						<Text style={styles.orderVal}>{('¥' + MethodUtil.toThousands(creditApplyAmount || 0)) + '元'}</Text>
					</View>
					<View style={styles.orderCol}>
						<Text style={styles.orderText}>申请人</Text>
						<Text style={[styles.orderVal, { fontSize: 14 * scale }]}>{createByName || '-'} | {organName || '-'}</Text>
					</View>
				</View>
				{
					creditApplyStatus === '40' && ifEdit ?
						<View style={styles.reApplyBtn} >
							<TouchableOpacity activeOpacity={0.8} style={styles.reApplyTextView} onPress={() => replyPress()}>
								<Text style={styles.reApplyText}>重新申请</Text>
							</TouchableOpacity>
						</View>
						: null
				}
			</View>
		</View>
	)
}
const styles = StyleSheet.create({
	//授信历史记录
	orderCell: {
		width: 351 * scale,
		backgroundColor: '#fff',
		alignItems: 'center',
		marginBottom: 12 * scale,
		marginLeft: 12 * scale,
	},
	order: {
		width: 351 * scale,
	},
	orderHead: {
		justifyContent: 'space-between',
		alignItems: 'center',
		flexDirection: 'row',
		marginTop: 12 * scale,
		marginBottom: 4 * scale,
	},
	orderHeadLeft: {
		alignItems: 'center',
		flexDirection: 'row',
	},
	orderHeadText: {
		fontSize: 12 * scale,
		color: '#979797',
		marginLeft: 13 * scale,
		flexWrap: 'wrap'
	},
	statusText: {
		fontSize: 14 * scale,
		color: style.color.themeColor,
		fontWeight: '600',
		marginRight: 13 * scale,
	},
	statusListBtn: {
		fontSize: 10 * scale,
		color: style.color.themeColor,
		textAlign: 'right',
		marginBottom: 3 * scale,
		marginRight: 13 * scale,
	},
	orderMain: {
		flexDirection: 'row',
		marginBottom: 18 * scale,
		flexWrap: 'wrap',
	},
	orderCol: {
		flex: 1,
		flexDirection: 'column',
		marginLeft: 13 * scale,
	},
	orderText: {
		fontSize: 12 * scale,
		color: '#000',
		fontWeight: '100',
		marginBottom: 3 * scale,
	},
	orderVal: {
		fontSize: 16 * scale,
		color: '#000',
		fontWeight: '600'
	},
	element: {
		fontSize: 10 * scale,
		backgroundColor: style.color.themeColor,
		color: '#fff',
		borderRadius: 3 * scale,
		paddingLeft: 2 * scale,
		paddingRight: 2 * scale
	},
	reApplyBtn: {
		flexDirection: 'column',
		justifyContent: 'center',
		alignItems: 'flex-end',
	},
	reApplyTextView: {
		width: 80 * scale,
		backgroundColor: style.color.themeColor,
		paddingTop: 8 * scale,
		paddingBottom: 8 * scale,
		marginBottom: 14 * scale,
		marginRight: 13 * scale,
		borderRadius: 6 * scale,
	},
	reApplyText: {
		fontSize: 12 * scale,
		color: '#fff',
		textAlign: 'center'
	},
})